<template>
  <div class="box" ref='notfound'>
     <img :src="imgsrc" alt="">
     <span class="box_span" v-for="(item,index) in spanNum" :key="index" :style="item"></span>
    <span class="box_1"  @click="gotoHome">
            <van-circle v-model="currentRate" :rate="100" :speed="10" :text="text" size="150px" stroke-width="75"/>
    </span>

  </div>
</template>

<script>

export default {
data() {
    return {
        imgsrc:require("@/assets/image/404.png"),
        spanNum:[],
        currentRate: 0,
        count:10
    }
},
computed: {
    text() {
       return (10-Math.floor(this.currentRate/10)) + " S"
    },
  },
  watch:{
      currentRate(v){
        if(v==100){
            this.gotoHome()
        }
      }
  },
methods: {
    gotoHome(){
        this.$router.push({
            name:'home'
        })
    }
    ,
    //随机生成span
    spanInit(){
        let width=this.$refs.notfound.clientWidth
        let height=this.$refs.notfound.clientHeight
        console.log(width,height);
        //定义500个span
        for(let i=0;i<=300;i++){
            //span随机高与随机宽
            let x=width * Math.random()
            let y=height * Math.random()
            //span的随机颜色
            let r=Math.random()*255
            let g=Math.random()*255
            let b=Math.random()*255
            let a=Math.random()*1
        //span的随机大小
            let scale=Math.random()*2
            //span出现动画的随机事件
            let time=Math.random()*5

            this.spanNum.push({
                left:x+"px",
                top:y+"px",
                background:`rgba(${r},${g},${b},${a})`,
                transform:'scale('+scale+')',
                animationDelay:time+"s"
            })
        }
    },
},
mounted() {
    this.spanInit()
},
}
</script>

<style>

.box{
    height: 100%;
    width: 100%;
    position: relative;
      background-image: linear-gradient( #747477,#9198e5);
}

.box img{
    position: absolute;
    height: 300px;
    width: 300px;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    margin: auto;
}
.box_span{
    display: block;
    position: absolute;
    height: 3px;
    width: 3px;
    border-radius: 50%;
    animation: big 3s infinite;
    box-shadow: 0px 0px 5px #fff;
}
.box_1{
    display: inline-block;
}
@keyframes big{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
</style>